<template>
  <div class="page-container">
    <!--工具栏-->
    <el-dialog title="物料"  class="my-dialog-class" width="80%" :visible.sync="itemDialogVisible"
      :before-close="handleClose">

      <div class="gk-layout-container">
        <div class="gk-layout-header">
          <div style="float:left;">
            <el-form :inline="true" :model="filters" :size="global.gSize">
              <el-form-item>
                <el-input v-model="filters.name" :placeholder="$t('item.please enter')"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="filters.code" placeholder='请输入编码'></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="filters.classifyId" placeholder="请选择物料类别" style="width: 175px;" clearable>
                  <el-option v-for="item in classTypes" :key="item.id" :label="item.name + item.areaId" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')" perms="material:item:view" type="primary"
                @click="findPage(1)" />
            </el-form>
          </div>
        </div>



        <div class="gk-layout-header">


          <my-table :data="pageResult.content" :loading="loading" @selection-change="selectionChange">
            <el-table-column type="selection" width="40"></el-table-column>

            <el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
              <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" width="100" prop="code" label="编码" key="code" />
            <el-table-column header-align="center" align="center" width="150" prop="name" label="名称" key="name" />
            <el-table-column header-align="center" align="center" width="450" prop="gg" label="规格" key="gg" />
            <el-table-column header-align="center" align="center" width="100" prop="classifyId" key="classifyId"
              label="类别" :formatter="selectionFormat" />

            <el-table-column :label="$t('action.operation')" width="100" fixed="right" header-align="center"
              align="center">
              <template slot-scope="scope">
                <kt-button icon="el-icon-edit" :label="$t('action.Select')" perms="material:item:view" type="danger"
                  @click="handleSelect(scope.$index, scope.row)" />
              </template>
            </el-table-column>
          </my-table>
        </div>
        <!--分页栏-->
        <div class="toolbar gk-layout-footer" style="padding:10px;">
          <kt-button icon="el-icon-edit" :label="$t('action.batchSelect')" perms="material:item:view" type="danger"
            @click="handleBatchSelect()" :disabled="this.selections.length === 0" style="float:left;" />
          <el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
            :current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
            style="float:right;">
          </el-pagination>
        </div>


      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"

import KtButton from "@/views/Core/KtButton"
import MyTable from "@/views/Core/MyTable"
import { format } from "@/utils/datetime"
export default {
  components: {
    PopupTreeInput,

    KtButton,
    MyTable
  },
  props: {
    fromCorpId: {  // 供应商主键
      type: Number
    },
    itemDialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {

      filters: {
        name: '', pageNum: 1, pageSize: 8
      },
      pageResult: {},

      selections: [],// 列表选中列
      // 新增编辑界面数据
      editLoading: false,
      loading: false,
      dataForm: {
        id: 0,
        //classifyId: ,
        code: '',
        name: '',
        active: 0
      },
      classTypes: []
    }
  },

  methods: {
    //获取分页数据
    findPage: function (data) {

      if (data != -1) {
        this.filters.pageNum = data
      }
      //入库单物料选择

      this.$api.item.findPage(this.filters).then((res) => {
        this.pageResult = res.data
        this.findClassTypes()
      })



    },

    selectionChange: function (selections) {
      this.selections = selections

    },
    handleSelect: function (index, row) {

      this.$emit('handleSelect', [row])
    },
    // 批量选择
    handleBatchSelect: function () {

      // let ids = this.selections.map(item => item.id) 
      this.$emit('handleSelect', this.selections)
    },


    selectionFormat: function (row, column, cellValue, index) {
      let key = ""
      let propt = column.property;
      let val = row[column.property];
      let dict = this.classTypes;
      for (let i = 0; i < dict.length; i++) {
        if (dict[i].id == val) {
          return dict[i].name;
        }
      }
      return val
    },

    //加载物料类别分类
    findClassTypes: function () {
      this.$api.classify.findPage().then((res) => {
        this.classTypes = res.data.content

      })
    },
    handleClose: function () {
      this.$emit('itemHidden', {})
    },


  },
  created() {
    this.findClassTypes()
  },
  mounted() {

    this.findPage(1)

  }

}

</script>

<style scoped></style>
